<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 80%;overflow-y:auto"></div>
<script type="text/javascript" src="./echarts.min.js"></script>
<script type="text/javascript">
    let dom =document.getElementById("container");
    let myChart =echarts.init(dom);
    let app ={};
    //加载实时数据
    function loadPieChart(dataJson){
<!--        let data = JSON.parse(dataJson);-->
<!--        if (data &&typeof data ==="object") {-->
<!--            myChart.setOption(data,true);-->
<!--        }-->
        myChart.clear();
		let data = [{name:'健康',value:0},{name:'亚健康',value:0},{name:'不健康',value:0}];
        let res = JSON.parse(dataJson);

        for(let i=0;i<res.length;i++){
            //data.push({value:res[i].value,name:res[i].name});
            //data.push({value:res.data.data[i].value,name:res.data.data[i].name});
            for ( let j in data){
                // console.log(j)
                if(res[i]['name'] == data[j]['name']){
                  data[j]['value'] = res[i].value
                }
            }
        }

        myChart.setOption({
            "color": ['#4CAE85', '#FFAD00', '#FF6356'],
            "legend": {
                "orient": "vertical",
                "bottom": "bottom"
            },
            "series": [{
                "center": ["50%", "60%"],
                "radius": "55%",
                "itemStyle": {
                    "emphasis": {
                        "shadowBlur": 10,
                        "shadowColor": "rgba(0, 0, 0, 0.5)",
                        "shadowOffsetX": 0
                    }
                },
                "type": "pie",
                "data": data,
            }],
            "title": {
                "text": "检测数据实时统计",
                "x": "center"
            },
            "tooltip": {
                "formatter": "{b}: {c} ({d}%)",
                "trigger": "item"
            }
        });

<!--        myChart.setOption({-->
<!--            title: {-->
<!--              text: "检测数据实时统计", //主标题-->
<!--              x: "center", //x轴方向对齐方式-->
<!--            },-->
<!--            tooltip: {-->
<!--              trigger: "item",-->
<!--              formatter: "{b}: {c} ({d}%)",-->
<!--            },-->
<!--            legend: {-->
<!--              orient: "vertical",-->
<!--              bottom: "bottom",-->
<!--            },-->
<!--            series: [-->
<!--              {-->
<!--                type: "pie",-->
<!--                radius: "80%",-->
<!--                center: ["50%", "50%"],-->
<!--                data: data,-->
<!--                itemStyle: {-->
<!--                  emphasis: {-->
<!--                    shadowBlur: 10,-->
<!--                    shadowOffsetX: 0,-->
<!--                    shadowColor: "rgba(0, 0, 0, 0.5)",-->
<!--                  },-->
<!--                  normal: {-->
<!--                    color: function(params) {-->
<!--                      //自定义颜色-->
<!--                      let colorList = [-->
<!--                      '#4CAE85', '#FFAD00', '#FF6356'-->
<!--                      ];-->
<!--                      return colorList[params.dataIndex]-->
<!--                    }-->
<!--                  }-->
<!--                },-->
<!--              },-->
<!--            ],-->
<!--          });-->
    }
    function loadHistoryLineChart(dataJson){
        myChart.clear();
        let data = JSON.parse(dataJson);
        let xAxis = [];
        let healthData = [];
        let subHealthData = [];
        let unHealthData = [];
        for(let i=0;i<data.length;i++){
            xAxis.push(data[i].date);
            healthData.push(data[i].healthValue);
            subHealthData.push(data[i].subHealthValue);
            unHealthData.push(data[i].unHealthValue);
        }
        myChart.setOption({
            title: {
              text: '检测数据历史统计图',
              left: 'center',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['健康', '亚健康', '不健康'],
                bottom: "bottom",
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '6%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: ['1%', '1%'],
                data: xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '健康',
                    type: 'line',
                    //stack: '总量',
                    data: healthData,
                    itemStyle: {color: "#4CAE85"}
                },
                {
                    name: '亚健康',
                    type: 'line',
                    //stack: '总量',
                    data: subHealthData,
                    itemStyle: {color: "#FFAD00"}
                },
                {
                    name: '不健康',
                    type: 'line',
                    //stack: '总量',
                    data: unHealthData,
                    itemStyle: {color: "#FF6356"}
                }
            ]
          });
    }
    function loadCycleLineChart(dataJson){
        myChart.clear();
        let data = JSON.parse(dataJson);
        let xAxis = [];
        let healthData = [];
        let subHealthData = [];
        let unHealthData = [];

        for(let i=0;i<data.length;i++){
            xAxis.push(data[i].date);
            healthData.push(data[i].healthValue);
            subHealthData.push(data[i].subHealthValue);
            unHealthData.push(data[i].unHealthValue);
        }

        myChart.setOption({
            title: {
              text: '检测数据历史统计图',
              left: 'center',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['健康', '亚健康', '不健康'],
                bottom: "bottom",
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '6%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: ['1%', '1%'],
              data: xAxis
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '健康',
                type: 'line',
                //stack: '总量',
                data: healthData,
                itemStyle: {color: "#4CAE85"}
              },
              {
                name: '亚健康',
                type: 'line',
                //stack: '总量',
                data: subHealthData,
                itemStyle: {color: "#FFAD00"}
              },
              {
                name: '不健康',
                type: 'line',
                //stack: '总量',
                data: unHealthData,
                itemStyle: {color: "#FF6356"}
              }
            ]
        });
    }
    function loadNDLineChart(dataJson){
        myChart.clear();
        let list = JSON.parse(dataJson);
        let xAxis = [];
        let data = [];
        for(let i=0;i<list.length;i++){
            xAxis.push(list[i].name);
            data.push(list[i].value);
        }
        myChart.setOption({
            title: {
              text: '检测数据历史统计图',
              left: 'center',
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              boundaryGap: ['1%', '1%'],
              data: xAxis
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data:data,
              type:'line'
            }]
        });
    }
	//加载铜粒子实时数据
    function loadCooperRtPieChart(dataJson){
		myChart.clear();
		let data = [{name:'合格',value:0},{name:'不合格',value:0}];
        let res = JSON.parse(dataJson);
        if (data &&typeof data ==="object") {
			for(let i=0;i<res.length;i++){
				//data.push({value:res[i].value,name:res[i].name});
				//data.push({value:res.data.data[i].value,name:res.data.data[i].name});
				for ( let j in data){
                    // console.log(j)
                    if(res[i]['name'] == data[j]['name']){
                      data[j]['value'] = res[i].value
                    }
                }
			}
			myChart.setOption({
				title: {
					text: "检测数据实时统计", //主标题
					x: "center", //x轴方向对齐方式
				},
				tooltip: {
					trigger: "item",
					formatter: "{b}: {c} ({d}%)",
				},
				legend: {
					orient: "vertical",
					bottom: "bottom",
				},
				series: [
					{
						type: "pie",
						radius: "80%",
						center: ["50%", "50%"],
						data: data,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)",
							},
							normal: {
								color: function(params) {
									//自定义颜色
									let colorList = [
										'#4CAE85', '#FF6356'
									];
									return colorList[params.dataIndex]
								}
							}
						},
					},
				],
			});
            //myChart.setOption(data,true);
        }
	}
	//铜粒子历史数据
	function loadCooperHistoryLineChart(dataJson){
		myChart.clear();
		let res = JSON.parse(dataJson);
		let dataSet=[];
		let xAxis = ['日期'];
		let unqualifiedCopperNum = ['不合格'];
		let qualifiedCopperNum = ['合格'];
		for(let i=0;i<res.length;i++){
			xAxis.push(res[i]['date']);
			unqualifiedCopperNum.push(res[i]['unqualifiedCopperNum']);
			qualifiedCopperNum.push(res[i]['qualifiedCopperNum']);
		}
		dataSet.push(xAxis);//表头数据
		dataSet.push(qualifiedCopperNum);//合格
		dataSet.push(unqualifiedCopperNum);//不合格
		myChart.setOption({
			legend: {},
			tooltip: {},
			dataset: {
				// 提供一份数据。
				source: dataSet,
			},
			// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
			xAxis: { type: 'category' },
			// 声明一个 Y 轴，数值轴。
			yAxis: {},
			// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
			series: [{ type: 'line', seriesLayoutBy: 'row',itemStyle: {color: "#4CAE85"},},
				{ type: 'line', seriesLayoutBy: 'row',itemStyle: {color: "#FF6356"},}, ]
		});
	}


	//铜粒子周期数据//铜粒子无该需求

	//铜粒子正太分布//铜粒子无该需求

</script>
</body>
</html>